<template>
	<view>
		<scroll-view class="scroll-list" :scroll-into-view="scrollViewId" scroll-y="true" scroll-with-animation :style="{height:winHeight + 'px'}">
			<view v-for="(item,index) in contactList" :key="index" :id="item.letter == '#' ? 'indexed-list-YZ' :'indexed-list-' + item.letter">
				<view class="letter-title" v-if="item.data&&item.data.length" id="item.letter">{{item.letter}}</view>
				<view> .......</view>
			</view>
		</scroll-view>
		<view class="right-menu">
			<view v-for="(i,index) in Letters" :key="index" @click="jumper(i,index)" :class="jumperIndex == i?'letter-item active':'letter-item'">{{i}}</view>
		</view>
	</view>
</template>

<script>
	import pinyin from '../myfriend/components/Convert_Pinyin.js'
	export default {
		data() {
			return {
				jumperIndex: 'A',
				contactList: [],
				scrollViewId: '',
				winHeight: 0,
				itemHeight: 0,
				Letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U',
					'V', 'W', 'X', 'Y', 'Z', '#'
				],
			}
		},
		created() {
			this.getList()
		},
		onLoad() {
			let winHeight = uni.getSystemInfoSync().windowHeight;
			this.itemHeight = winHeight / 26;
			this.winHeight = winHeight;
		},
		methods: {
			jumper(event, i) {
				this.jumperIndex = event;
				let len = this.contactList[i].data.length;
				if (event == '#') {
					this.scrollViewId = 'indexed-list-YZ';
					return
				}
				if (len > 0) {
					console.log(111);
					this.scrollViewId = 'indexed-list-' + event;
				}
			},
			getList() {
				// #ifdef APP-PLUS
				plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, function(addressbook) {
					// 查找联系人  
					addressbook.find(["displayName", "phoneNumbers"], function(contacts) {
						console.log('获取联系人成功')
						// console.log(JSON.stringify(contacts)); //拿到的数据
						this.pySort()
					}, function() {
						uni.showToast({
							title: '获取联系人失败',
							duration: 2000
						})
					}, {
						multiple: true
					});
				}, function(e) {
					console.log("Get address book failed: " + e.message);
				})
				// #endif 
			},
			pySort(arrList) {
				var $this = this;
				if (!String.prototype.localeCompare)
					return null;
				var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ#".split(''); //ABCDEFGHJKLMNOPQRSTWXYZ
				var zh = "阿八嚓哒妸发旮哈*讥咔垃痳拏噢妑七呥涩它**穵夕丫帀".split('');
				var result = [];
				var curr;

				for (let i = 0; i < letters.length; i++) {
					curr = {
						letter: letters[i],
						data: []
					}; //字母对象，data数据
					arrList.forEach((n) => {
						let initial = n.displayName.charAt(0); //截取第一个字符
						if (initial == letters[i] || initial == letters[i].toLowerCase()) { //首字符是英文的
							curr.data.push(n);
						} else if (zh[i] !== '*' && $this.isChinese(initial)) { //判断是否是无汉字,是否是中文
							let chinaName = pinyin.chineseToPinYin(initial).charAt(0); //直接使用pinyin中方法
							if (chinaName == letters[i] || chinaName == letters[i].toLowerCase()) { //首字符是英文的
								curr.data.push(n);
							}
						}
						if (letters[i] == '#' && !$this.isChar(initial) && !$this.isChinese(initial)) {
							curr.data.push(n);
						}
					})
					result.push(curr)
				}
				this.contactList = result; //contactList 是data中定义的 []
			},
			isChinese: function(temp) {
				var re = /[^\u4E00-\u9FA5]/;
				if (re.test(temp)) {
					return false;
				}
				return true;
			},
			isChar: function(char) {
				var reg = /[A-Za-z]/;
				if (!reg.test(char)) {
					return false;
				}
				return true;
			},
		}
	}
</script>

<style>
</style>
